import { useHistory } from 'react-router-dom'
import { NavBar } from 'antd-mobile'

import styles from './index.module.scss'
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getSearchResults } from '@/store/actions/search'
import { RootState } from '@/types/store'
import ArticleItem from '@/pages/Home/components/ArticleItem'
import { InfiniteScroll, List } from 'antd-mobile'
import { useState } from 'react'
let page = 1
const Result = () => {
  const history = useHistory()
  const location = useLocation()
  const urlSearchObj = new URLSearchParams(location.search)
  const keyWord = urlSearchObj.get('keyword')
  const dispatch = useDispatch()

  const { searchResults } = useSelector((state: RootState) => state.search)
  // useEffect(() => {
  //   dispatch(getSearchResults(keyWord!, 1))
  // }, [])

  const [hasMore, setHasMOre] = useState(true)
  const loadMore = async () => {
    await dispatch(getSearchResults(keyWord!, page))
    page = page + 1
  }

  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}>搜索结果</NavBar>
      <div className="article-list">
        {searchResults.map((item) => {
          return <ArticleItem article={item} key={item.art_id} />
        })}
        <InfiniteScroll hasMore={hasMore} loadMore={loadMore} />
      </div>
    </div>
  )
}

export default Result
